<!-- 个人博客详情页 -->
<template>
	<div class="personal-blog-details-body-box">
		<el-container class="layout-box">
			<el-aside class="personal-blog-details-left" style="width: 317px;">
				<div class="user-info-box">
					<div class="user-info-box-head-portrait">
						<el-avatar :size="45" :src="userInfo.avatarLink">
						</el-avatar>
					</div>
					<div class="user-info-box-detailed-information">
						<div>
							{{userInfo.nickName}}
						</div>
						<div class="join-time">
							我们已经相遇{{joinDuration}}啦~
						</div>
					</div>
				</div>
				<div class="item-rank"></div>
				<div class="blog-info-box">
					<span>
						原创：{{totalNumber}} 篇
					</span>
				</div>
				<div class="reward-box">
					<el-popover trigger="hover" placement="top">
						<!-- 悬浮图片地址 -->
						<img src="https://blog-system-1312387313.cos.ap-chengdu.myqcloud.com/%E5%8D%9A%E5%AE%A2%E6%96%87%E4%BB%B6/2022-06-21/2cfe5e33ba555fbfa094af5cd302ff6.png"
							style="width:200px;height:200px;" />

						<div slot="reference">
							<div>
								打赏作者
							</div>
						</div>
					</el-popover>
				</div>


			</el-aside>

			<div class="user-info-box-call-back-icon-box">
				<!-- <el-tooltip class="item star" effect="light"  placement="top"> -->
				<i class="el-icon-cloudy-and-sunny my-el-icon star" @click="callBackBlogList"></i>
				<!-- </el-tooltip> -->
			</div>
			<!-- 右边部分 -->
			<el-container class="personal-blog-details-right">
				<div class="personal-blog-list">
					<el-main>
						<el-table :header-cell-style="headeRowClass" :row-style="{height:54+'px'}" :data="tableData"
							style="width: 100%">
							<el-table-column label="" prop="title">
								<template slot-scope="scope">
									<div v-html="scope.row.title" @click="jumpToBlogDetailsPage(scope.row)"></div>
								</template>
							</el-table-column>
							<el-table-column label="" prop="content" :show-overflow-tooltip='true'>
								<template slot-scope="scope">
									<div v-html="scope.row.content"></div>
								</template>
							</el-table-column>
							<el-table-column label="" v-show="false" prop="createTime"></el-table-column>
							<el-table-column align="right">
								<template slot="header" slot-scope="scope">
									<el-input style="width: 50%; margin-right: 5%;" v-model="search" size="mini"
										@keyup.enter.native="searchUserBlog" placeholder="输入关键字搜索" />
									<el-button type="primary" icon="el-icon-search" size="mini"
										class="serarch-assembly search-btn" @click="searchUserBlog">搜索</el-button>
								</template>
								<template slot-scope="scope">
									<el-button size="mini" v-show="isOperation"
										@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
									<el-button size="mini" v-show="isOperation"
										@click="handleDelete(scope.$index, scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-main>

				</div>


			</el-container>
		</el-container>
	</div>
</template>
<script>
	import jwtDecode from 'jwt-decode';
	import {
		devArticleManagementUrl
	} from '@/api/apiconst'
	import {
		devUserManagementUrl
	} from '@/api/apiconst'
	export default {
		name: "PersonalBlogDetails",
		mounted() {

			//初始化数据
			this.initData();



			function secondToDate(second) {
				if (!second) {
					return 0;
				}
				var time = new Array(0, 0, 0, 0, 0);
				if (second >= 365 * 24 * 3600) {
					time[0] = parseInt(second / (365 * 24 * 3600));
					second %= 365 * 24 * 3600;
				}
				if (second >= 24 * 3600) {
					time[1] = parseInt(second / (24 * 3600));
					second %= 24 * 3600;
				}
				if (second >= 3600) {
					time[2] = parseInt(second / 3600);
					second %= 3600;
				}
				if (second >= 60) {
					time[3] = parseInt(second / 60);
					second %= 60;
				}
				if (second > 0) {
					time[4] = second;
				}
				return time;
			}
			//获取用户信息
			let userInfo = this.userInfo;


			function setTime() {

				var create_time = Math.round(new Date(userInfo.createTime).getTime() / 1000);
				//mouth要少一个月不然会出问题
				// var create_time = Math.round(new Date(Date.UTC(2020, 10, 18, 0, 0, 0)).getTime() / 1000);
				var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
				var currentTime = secondToDate((timestamp - create_time));
				var currentTimeHtml = '<span class="time-span">' + currentTime[0] + '</span>年<span class="time-span">' +
					currentTime[1] + '</span>天<span class="time-span">' +
					currentTime[2] + '</span>时<span class="time-span">' + currentTime[3] +
					'</span>分<span class="time-span">' + currentTime[4] +
					'</span>秒';


				document.getElementsByClassName("join-time")[0].innerHTML = "我们已经相遇" + currentTimeHtml + "啦~";
			}
			//即时刷新
			this.timer = setInterval(setTime, 1000);


		},
		data() {

			return {
				userInfo: {
					ID: "",
					avatarLink: "",
					nickName: "",
					createTime: ""
				},
				tableData: [],
				search: '',
				joinDuration: "1年24天0时59分7秒",
				// 当前页数
				page: 1,
				size: 15,
				// 总页数
				total: 0,
				totalNumber: 0,
				isOperation: false

			}
		},
		methods: {
			//初始化数据
			initData() {


				//加载用户信息
				this.loadUserMsg();




				//加载文章数据
				this.loadSpecifyUserArticleList();


			},
			jumpToBlogDetailsPage(row) {
				//跳转到博客详情页
				this.$router.push({
					path: '/blogDetails',
					query: {
						blogId: row.ID,
					}
				});
			},
			searchUserBlog() {
				this.page = 1
				this.size = 15
				this.total = 0
				this.loadSpecifyUserArticleList();
			},
			listenerFunction(e) {
				// 添加事件句柄
				document.addEventListener('scroll', this.handleScroll, true);

			},
			handleScroll() {

				// 是否滚动到底部的判断
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
				let clientHeight = document.documentElement.clientHeight;
				let scrollHeight = document.documentElement.scrollHeight;


				if (scrollTop + clientHeight == scrollHeight) {

					// 是否调用请求方法判断
					if (this.$data.page > this.$data.total) {
						console.log("已经是到底了，没得数据了");
						return;
					} else {
						console.log("开始调用")
						this.loadSpecifyUserArticleList();

					}
				}
			},
			callBackBlogList() {
				//跳转到博客界面
				this.$router.push({
					path: "/blogList"
				});
			},
			//编辑文章
			handleEdit(index, row) {
				//跳转到修改博客界面
				this.$router.push({
					path: '/editBlog',
					query: {
						blogId: row.ID,
					}
				});
			},
			//删除文章
			handleDelete(index, row) {
				this.$confirm('真的要把我扔掉嘛?', '卑微小文在线央求   ┭┮﹏┭┮', {
					confirmButtonText: '真的',
					cancelButtonText: '骗你的',
					type: 'warning',
					closeOnClickModal: false,
					roundButton: true
				}).then(() => {
					this.$axios({
						method: 'GET',
						url: '/article/delete/' + row.ID,
						baseURL: devArticleManagementUrl,
					}).then(
						response => {
							if (response.data.code == 200) {
								//延时1s后刷新数据，避免Es数据未及时更新

								let timeout=setTimeout(() => {
									this.searchUserBlog();
									this.$message({
										type: 'success',
										message: '已经干掉了~ o(￣ヘ￣o＃)'
									});
								}, 1000)

								// //清除一次性定时器
								// clearTimeout(timeout)

							
							}
						},
						error => {
							this.$message.error('诶呀~服务器走丢了');
						}
					);



				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消成功啦~╰(*°▽°*)╯'
					});
				});



			},
			headeRowClass({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				//表头的背景颜色
				if (rowIndex == 0) {
					return 'background:Transparent'
				}
			},
			//加载左侧用户信息的数据
			loadUserMsg() {

				this.$axios({
					method: 'GET',
					url: '/user/detailedInfo/' + this.$route.query.userId,
					baseURL: devUserManagementUrl,
				}).then(
					response => {
						if (response.data.code == 200) {
							let userInfoDetiles = response.data.data;
							this.userInfo.ID = userInfoDetiles.id;
							this.userInfo.avatarLink = userInfoDetiles.avatarLink;
							this.userInfo.nickName = userInfoDetiles.nickName;
							this.userInfo.createTime = userInfoDetiles.createTime;

							let userId = jwtDecode(localStorage.getItem("token")).ID;
							//判断是否展示删除和编辑按钮
							if (userId != null && userId != '' && userId == this.userInfo.ID) {
								this.isOperation = true;
							}


						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);
			},
			//加载右侧文章列表的数据
			loadSpecifyUserArticleList() {
				console.log("当前页码是", this.page)
				this.$axios({
					method: 'POST',
					url: '/article/queryUserArticleList',
					baseURL: devArticleManagementUrl,
					data: {
						userId: this.$route.query.userId,
						searchContent: this.search,
						page: this.page,
						size: this.size
					}
				}).then(
					response => {
						if (response.data.code == 200) {

							console.log("文章数据", response.data.data);
							this.totalNumber = response.data.data.totalNumber;
							// 根据当前页面数是否为1来进行判断，同时将请求的列表装在定义的控制符串里
							if (this.page === 1) {
								this.tableData = response.data.data.searchList;
								// 获取总页数
								this.total = response.data.data.pageCount;
								console.log("total", this.total)
							} else {
								// 将之前请求的数据以及后面请求回来的数据装到一个数组里面（拓展运算符）
								this.tableData = [
									...this.tableData,
									...response.data.data.searchList
								]
							}
							// 当前页数累加
							++this.page;
						}
					},
					error => {
						this.$message.error('诶呀~服务器走丢了');
					}
				);
			}

		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
			}

			// 移除通过addEventListener()方法添加的事件句柄
			document.removeEventListener("scroll", this.listenerFunction);

			//移除动画人物
			document.querySelector('#live2d-widget').remove();
		},
		created() {
			//创建滚动条监听
			this.listenerFunction();

			//创建看板娘
			window.L2Dwidget
				.init({
					pluginRootPath: '../live2dw/',
					pluginJsPath: 'lib/',
					pluginModelPath: 'live2d-widget-model-shizuku/assets/',
					model: {
						jsonPath: '../live2dw/live2d-widget-model-shizuku/assets/shizuku.model.json'
					},
					dialog: {
						enable: true,
						script: {
							//每20s，显示一言（调用一言Api返回的句子）
							'every idle 20s': '$hitokoto$',
							//触摸到class='star'对象,将会展示的文字
							'hover .star': '点击小云朵可就要离开我啦~ ',
							//触摸到身体
							'tap body': '害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄',
							//触摸到头部
							'tap face': '~~摸头会长不高的'
						}
					},
					display: { //人物的属性配置
						position: 'left',
						width: 250,
						height: 500,
						hOffset: 100, // 横向偏移
						vOffset: -20 // 纵向偏移
					},
					mobile: {
						show: true, //是否在移动端展示
						scale: 0.5 //t透明度
					}

				});



		}

	};
</script>

<style scoped>
	.personal-blog-details-body-box {
		background: url("@/assets/images/personal-blog-details-map.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: top center;
		background-attachment: fixed;
		overflow: auto;
		height: 100%;
		width: 100%;
		min-height: 100vh;
	}

	.personal-blog-details-body-box .layout-box {
		/* margin-top: 1%; */
		width: 100%;
		height: 100%;

	}

	.personal-blog-details-body-box .layout-box .personal-blog-details-left {

		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		left: 3%;
		width: 40%;
		height: 40%;
		top: 4%;
		color: white;

	}

	.personal-blog-details-body-box .layout-box .personal-blog-details-left .user-info-box {
		margin-top: 2%;
		heigth: 40%;

	}

	.personal-blog-details-body-box .layout-box .personal-blog-details-left .item-rank {
		height: 1px;
		background-color: #f5f6f7;
		width: 268px;
		margin: auto;
		margin-top: 5%;
	}

	.personal-blog-details-body-box .layout-box .personal-blog-details-left .user-info-box .user-info-box-head-portrait {
		margin-left: 42%;
		display: inline-block;
	}

	.personal-blog-details-body-box .layout-box .personal-blog-details-left .user-info-box .user-info-box-detailed-information {
		text-align: center;
	}

	.user-info-box-detailed-information .join-time {
		color: #999aaa;
	}

	.user-info-box-detailed-information .join-time .time-span {
		color: white;
	}

	.personal-blog-details-body-box .layout-box .personal-blog-details-left .blog-info-box {
		margin-top: 4%;
		margin-left: 4%;
	}

	.personal-blog-details-body-box .layout-box .personal-blog-details-left .reward-box {
		position: absolute;
		bottom: 2%;
		left: 40%;
		display: inline-block;

	}

	.personal-blog-details-body-box .layout-box .user-info-box-call-back-icon-box {
		position: fixed;
		left: 10%;
		top: 47%;
		color: white;

		font-size: 34px;
	}

	.personal-blog-details-body-box .layout-box .personal-blog-details-right {

		background-color: rgba(0, 0, 0, 0.5);
		margin-left: 22%;
		width: 65%;
		height: 100%;
		overflow: auto;
	}

	.personal-blog-details-body-box .layout-box .personal-blog-details-right .personal-blog-list {
		margin-right: 2%;
		width: 100%;
		height: 100%;
		background-color: Transparent;
	}

	.personal-blog-details-body-box .layout-box .personal-blog-details-right .personal-blog-list .blog-table-list {
		width: 100%;

	}

	/*最外层透明*/
	.personal-blog-details-body-box >>> .el-table,
	.personal-blog-details-body-box >>> .el-table__expanded-cell {
		background-color: transparent;
	}

	/* 表格内背景颜色 */
	.personal-blog-details-body-box >>> .el-table th,
	.personal-blog-details-body-box >>> .el-table tr,
	.personal-blog-details-body-box >>> .el-table thead,
	.personal-blog-details-body-box >>> .el-table td {
		background-color: transparent;
	}


	.personal-blog-details-body-box >>> .el-container {
		display: inherit;
	}
</style>
